<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery仿QQ空间图片浏览功能特效 - xw素材网</title>
    <script src="<?=ASSETS?>photo/layer/layer/jquery.js?v=1.83.min"></script>
    <script src="<?=ASSETS?>photo/layer/ui/layui.js"></script>
    <script src="<?=ASSETS?>photo/layer/layer/layer.min.js"></script>
    <style>
        html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'}
        a,a:hover{ text-decoration:none;}
        pre{font-family:'微软雅黑'}
        .box{padding:20px; background-color:#fff; margin:50px 50px; border-radius:5px;}
        .box a{padding-right:15px;}
        #about_hide{display:none}
        .layer_text{background-color:#fff; padding:20px;}
        .layer_text p{margin-bottom: 10px; text-indent: 2em; line-height: 23px;}
        .button{display:inline-block; *display:inline; *zoom:1; line-height:30px; padding:0 20px; background-color:#56B4DC; color:#fff; font-size:14px; border-radius:3px; cursor:pointer; font-weight:normal;}
        .imgs img{width:190px;padding:0 30px 30px;}

    </style>
</head>
<body>

        <select>
            <option>我故乡</option>
            <option>The second option</option>
        </select>


<div class="box">
    <div id="imgs" class="imgs">
        <img src="<?=ASSETS?>photo/layer/images/1.jpg" layer-pname="xw素材网 - 1">
        <img src="<?=ASSETS?>photo/layer/images/2.jpg" layer-pname="xw素材网 - 2">
        <img src="<?=ASSETS?>photo/layer/images/3.jpg" layer-pname="xw素材网 - 3">
        <img src="<?=ASSETS?>photo/layer/images/4.jpg" layer-pname="xw素材网 - 4">
        <img src="<?=ASSETS?>photo/layer/images/1.jpg" layer-pname="xw素材网 - 1">
        <img src="<?=ASSETS?>photo/layer/images/2.jpg" layer-pname="xw素材网 - 2">
        <img src="<?=ASSETS?>photo/layer/images/3.jpg" layer-pname="xw素材网 - 3">
        <img src="<?=ASSETS?>photo/layer/images/4.jpg" layer-pname="xw素材网 - 4">
        <img src="<?=ASSETS?>photo/layer/images/1.jpg" layer-pname="xw素材网 - 1">
        <img src="<?=ASSETS?>photo/layer/images/2.jpg" layer-pname="xw素材网 - 2">
        <img src="<?=ASSETS?>photo/layer/images/3.jpg" layer-pname="xw素材网 - 3">
        <img src="<?=ASSETS?>photo/layer/images/4.jpg" layer-pname="xw素材网 - 4">

    </div>
</div>
<script>
//    !function(){
//
//
//    }();
//
    $(function(){

        layer.use('extend/layer.ext.js', function(){


            //初始加载即调用，所以需放在ext回调里
            layer.ext = function(){
                layer.photosPage({
                    html:'<div style="padding:20px;">这里传入自定义的html<p>相册支持左右方向键，支持Esc关闭</p><p>另外还可以通过异步返回json实现相册。更多用法详见官网。</p><p>'+ unescape("%u7D20%u6750%u5BB6%u56ED%20-%20sc.chinaz.com") +'</p><p id="change"></p></div>',
                    title: '快捷模式-获取页面元素包含的所有图片',
                    id: 100, //相册id，可选
                    parent:'#imgs'
                });
            };
        });



    });



</script>

</body>
</html>